<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui" template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style>
.legacy .ui-panel, .legacy.div.ui-state-hover {
    margin: 10px;
}
.legacy .ui-dashboard-column {
    width: 220px;
}
.ui-dashboard-active {
    border-color: var(- -primary-color);
    border-width: 3px !important;
    border-style: dashed;
}
.ui-dashboard-hover {
    border-color: #C2E085;
    border-width: 3px !important;
    border-style: solid;
}
body .ui-panel.chart-dashlet .ui-panel-content .ui-chart {
    height: 250px;
    max-height: 250px;
}
</style>
    </ui:define>

    <ui:define name="title">
        Dashboard
    </ui:define>

    <ui:define name="description">
        Dashboard is a layout component featuring dragdrop based content reordering similar to portal environments. Responsive layout requires <a href="https://primeflex.org/" target="_blank" rel="noopener noreferrer">PrimeFlex</a> CSS.
    </ui:define>

    <ui:param name="documentationLink" value="/components/dashboard" />
    <ui:param name="widgetLink" value="Dashboard" />

    <ui:define name="implementation">
        <h:form id="form">
            <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true">
                <p:autoUpdate />
            </p:growl>

            <div class="card">
                <h5 class="mt-0">Responsive</h5>
                <p:dashboard id="responsive" model="#{dashboardView.responsiveModel}" responsive="true">
                    <p:ajax event="reorder" listener="#{dashboardView.handleReorder}" />

                    <p:panel id="bar" header="Bar" closable="true" styleClass="chart-dashlet" >
                        <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                        <f:facet name="options">
                            <p:menu>
                                <p:submenu label="Panel Size">
                                    <p:menuitem action="#{dashboardView.onDashboardResize('bar', 'xl:col-4')}" immediate="true" update="@form">
                                        1/3 <p:graphicImage name="demo/images/dashboard/onethird.png" styleClass="ml-2" alt="one third" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('bar', 'xl:col-6')}" immediate="true" update="@form">
                                        1/2 <p:graphicImage name="demo/images/dashboard/onehalf.png" styleClass="ml-2" alt="one half" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('bar', 'xl:col-8')}" immediate="true" update="@form">
                                        2/3 <p:graphicImage name="demo/images/dashboard/twothirds.png" styleClass="ml-2" alt="two thirds" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('bar', 'xl:col-12')}" immediate="true" update="@form">
                                        Full <p:graphicImage name="demo/images/dashboard/full.png" styleClass="ml-2" alt="full" />
                                    </p:menuitem>
                                </p:submenu>
                            </p:menu>
                        </f:facet>
                        
                        <p:chart value="#{chartView.barModel}" style="width: 100%; height: 100%;" />
                    </p:panel>

                    <p:panel id="stacked" header="Stacked" closable="true" styleClass="chart-dashlet" >
                        <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                        <f:facet name="options">
                            <p:menu>
                                <p:submenu label="Panel Size">
                                    <p:menuitem action="#{dashboardView.onDashboardResize('stacked', 'xl:col-4')}" immediate="true" update="@form">
                                        1/3 <p:graphicImage name="demo/images/dashboard/onethird.png" styleClass="ml-2" alt="one third" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('stacked', 'xl:col-6')}" immediate="true" update="@form">
                                        1/2 <p:graphicImage name="demo/images/dashboard/onehalf.png" styleClass="ml-2" alt="one half" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('stacked', 'xl:col-8')}" immediate="true" update="@form">
                                        2/3 <p:graphicImage name="demo/images/dashboard/twothirds.png" styleClass="ml-2" alt="two thirds" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('stacked', 'xl:col-12')}" immediate="true" update="@form">
                                        Full <p:graphicImage name="demo/images/dashboard/full.png" styleClass="ml-2" alt="full" />
                                    </p:menuitem>
                                </p:submenu>
                            </p:menu>
                        </f:facet>
                        <p:chart value="#{chartView.stackedBarModel}" style="width: 100%; height: 100%;" />
                    </p:panel>

                    <p:panel id="donut" header="Doughnut" closable="true" styleClass="chart-dashlet" >
                        <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                        <f:facet name="options">
                            <p:menu>
                                <p:submenu label="Panel Size">
                                    <p:menuitem action="#{dashboardView.onDashboardResize('donut', 'xl:col-4')}" immediate="true" update="@form">
                                        1/3 <p:graphicImage name="demo/images/dashboard/onethird.png" styleClass="ml-2" alt="one third" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('donut', 'xl:col-6')}" immediate="true" update="@form">
                                        1/2 <p:graphicImage name="demo/images/dashboard/onehalf.png" styleClass="ml-2" alt="one half" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('donut', 'xl:col-8')}" immediate="true" update="@form">
                                        2/3 <p:graphicImage name="demo/images/dashboard/twothirds.png" styleClass="ml-2" alt="two thirds" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('donut', 'xl:col-12')}" immediate="true" update="@form">
                                        Full <p:graphicImage name="demo/images/dashboard/full.png" styleClass="ml-2" alt="full" />
                                    </p:menuitem>
                                </p:submenu>
                            </p:menu>
                        </f:facet>

                        <p:chart value="#{chartView.donutModel}" style="width: 100%; height: 100%;" />
                    </p:panel>

                    <p:panel id="cartesian" header="Cartesian" closable="true" styleClass="chart-dashlet" >
                        <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                        <f:facet name="options">
                            <p:menu>
                                <p:submenu label="Panel Size">
                                    <p:menuitem action="#{dashboardView.onDashboardResize('cartesian', 'xl:col-4')}" immediate="true" update="@form">
                                        1/3 <p:graphicImage name="demo/images/dashboard/onethird.png" styleClass="ml-2" alt="one third" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('cartesian', 'xl:col-6')}" immediate="true" update="@form">
                                        1/2 <p:graphicImage name="demo/images/dashboard/onehalf.png" styleClass="ml-2" alt="one half" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('cartesian', 'xl:col-8')}" immediate="true" update="@form">
                                        2/3 <p:graphicImage name="demo/images/dashboard/twothirds.png" styleClass="ml-2" alt="two thirds" />
                                    </p:menuitem>
                                    <p:menuitem action="#{dashboardView.onDashboardResize('cartesian', 'xl:col-12')}" immediate="true" update="@form">
                                        Full <p:graphicImage name="demo/images/dashboard/full.png" styleClass="ml-2" alt="full" />
                                    </p:menuitem>
                                </p:submenu>
                            </p:menu>
                        </f:facet>

                        <p:chart id="chartline" value="#{chartView.cartesianLinerModel}" style="width: 100%; height: 100%;" />
                    </p:panel>
                </p:dashboard>
            </div>

            <div class="card">
                <h5 class="mt-0">Legacy</h5>
                <p:dashboard id="legacy" model="#{dashboardView.legacyModel}" styleClass="legacy">
                    <p:ajax event="reorder" listener="#{dashboardView.handleReorder}" />

                    <p:panel id="sports" header="Sports" closable="true" toggleable="true">
                        <p:ajax event="toggle" listener="#{dashboardView.handleToggle}" />
                        <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                        <h:outputText value="Sports Content" />
                    </p:panel>

                    <p:panel id="finance" header="Finance" closable="true" toggleable="true">
                        <p:ajax event="toggle" listener="#{dashboardView.handleToggle}" />
                        <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                        <h:outputText value="Finance Content" />
                    </p:panel>

                    <p:panel id="lifestyle" header="Lifestyle" closable="true" toggleable="true">
                        <p:ajax event="toggle" listener="#{dashboardView.handleToggle}" />
                        <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                        <h:outputText value="Lifestyle Content" />
                    </p:panel>

                    <p:panel id="weather" header="Weather" closable="true" toggleable="true">
                        <p:ajax event="toggle" listener="#{dashboardView.handleToggle}" />
                        <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                        <h:outputText value="Weather Content" />
                    </p:panel>

                    <p:panel id="politics" header="Politics" closable="true" toggleable="true">
                        <p:ajax event="toggle" listener="#{dashboardView.handleToggle}" />
                        <p:ajax event="close" listener="#{dashboardView.handleClose}" />
                        <h:outputText value="Politics Content" />
                    </p:panel>
                </p:dashboard>
                <div style="clear: both" />
            </div>
        </h:form>
    </ui:define>

</ui:composition>
